<template>
  <a-modal @cancel="resetModalData()" :footer="null" v-model:visible="addVisible" title="新增用户">
    <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item label="姓名" :rules="rulesConfig.name" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入姓名"/>
      </a-form-item>
      <a-form-item label="密码" :rules="rulesConfig.password" name="password">
        <a-input type="password" v-model:value="formState.password" placeholder="请输入密码"/>
      </a-form-item>
      <a-form-item name="age" label="年龄" :rules="rulesConfig.age">
        <a-input v-model:value="formState.age" placeholder="请输入年龄"/>
      </a-form-item>
      <a-form-item name="gender" label="性别" :rules="rulesConfig.gender">
        <a-select v-model:value="formState.gender">
          <a-select-option :value="1">男</a-select-option>
          <a-select-option :value="2">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="salary" label="薪资" :rules="rulesConfig.salary">
        <a-input v-model:value="formState.salary" placeholder="请输入薪资"/>
      </a-form-item>
      <a-form-item name="create_time" label="入职时间" :rules="rulesConfig.create_time">
        <a-date-picker
            :disabledDate="disabledDate"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            show-time
            v-model:value="formState.create_time"
            placeholder="请选择入职时间"
        />
      </a-form-item>
      <a-form-item name="depart_id" label="部门名称" :rules="rulesConfig.depart_id">
        <a-select v-model:value="formState.depart_id" placeholder="请选择部门">
          <template v-for="item in departList" :key="item.id">
            <a-select-option :value="item.id">{{ item.title }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space :size="20">
          <a-button type="normal" @click="resetModalData()">关闭</a-button>
          <a-button type="primary" html-type="submit">添加</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {formState, rulesConfig, useDepartList} from './config'
import dayjs, {Dayjs} from "dayjs";
import useUserStore from "@/store/userModule";
import {message} from "ant-design-vue";

const userStore = useUserStore()
let departList = ref([{}])
const addVisible = ref(false)
const disabledDate = (current: Dayjs) => {
  /* 限制可选时间（当前时间往后推30天） */
  return current && current > dayjs().add(30, 'day').endOf("day");
}
const handleAddUserModal = async (flag: boolean) => {
  flag && (departList.value = await useDepartList())
  addVisible.value = flag;
}

const onFinish = (values: any) => {
  userStore.addUserAction(values)
  resetModalData()
}
const onFinishFailed = (errorInfo: any) => {
  message.error(errorInfo.errorFields[0].errors[0])
}

const resetModalData = () => {
  handleAddUserModal(false)
  formState.name = ""
  formState.password = ""
  formState.age = 0
  formState.gender = 1
  formState.salary = 0
  formState.create_time = "2020-05-05 09:00:52"
  formState.depart_id = ""
}
defineExpose({
  handleAddUserModal,
})
</script>

<style lang="less" scoped></style>
